<template>
    <div class="numCountCommp" :style="commpStyle">
        <div class="numTitle">
            <i :class="icon"></i>
            {{ title }}
        </div>
        <div class="numContent">
            <span class="numContentValue">{{ countNum }}</span>
            <span class="numContentUnit">{{ unit }}</span>
        </div>
    </div>
</template>
<script>
import BaseComp from "./baseComp";
export default{
    name: "numCountCommp",
    extends: BaseComp,
    model: {  
        prop: 'numCountValue',
        event: 'numCountChange'
    },
    props: {
        numCountValue: {
            type: [String, Number, Object],
            default: ()=>{
                return 0;
            }
        },
        //组件标题
        title: {
            type: String,
            default:()=>{
                return '统计'
            }
        },
        icon: {
            type: String,
            default:()=>{
                return ""
            }
        },
        //组件统计量单位
        unit: String
    },
    watch: {
        numCountValue: {
            handler(val){
                if(val){
                    this.countNum = val;
                }
            },
            deep: true,
            immediate: true
        }
    },
    data(){
        return{
            countNum: 0
        }
    },
    created(){
        //加载界面主题内容
        this.loadTheme(this.$options.name)
    },
    mounted(){},
    methods: {
        /**
         * 更新数据内容
         * @param data 需要更新的数据内容
         */
        update(data){
            this.countNum = data;
            this.$emit('numCountChange', this.countNum);
        }
    }

}
</script>
<style scoped lang="less"></style>